@mainfontcolor:#DDDDDD;

*{
  margin: 0;
  padding: 0;
}

a{
  text-decoration: none;
}



body{
  background:url("../static/shouye/5e4911c7c44d251ee030cfafe3660394.jpg");
}

#app{
  position: relative;
  width: 100vw;
  height: 100vh;
  background: black;
  opacity: 0.7;
  .nav{
    position: absolute;
    display: inline-block;
    width: 50vw;
    height: 20vh;
    right: 1vw;
    top: 5vh;
    ul{
      height: 20vh;
      margin: 0 auto;
      li{
        float: left;
        margin-left: 7vw;
        a{
          font-size: 24px;
          color: @mainfontcolor;
        }
      }
    }
  }

  .content{
    position: absolute;
    left: 16vw;
    bottom: 42vh;
    h2{
      font-size: 100px;
      color: @mainfontcolor;
    }
    p{
      margin-top: 1vh;
      font-size: 22px;
      color: @mainfontcolor;
    }
    a{
      display: inline-block;
      width: 140px;
      height: 50px;
      margin-top: 2vh;
      transition: .5s;
      &:hover{
        transform: scale(1.1);
      }
      .more{
        width: 140px;
        height: 50px;
        border: 3px solid @mainfontcolor;
        font-size: 18px;
        background: none;
        border-radius: 20px;
        color: @mainfontcolor;
        cursor: pointer;
      }
    }

  }

  .startdate{
    position: absolute;
    bottom: 2vh;
    right: 2vh;
    font-size: 12px;
    color: @mainfontcolor;
  }

  .star {
    position: absolute;
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #FFF;
    top: 20vh;
    left: 50vw;
    animation: star-ani 3.8s linear infinite;
    -webkit-animation:star-ani 3.8s linear infinite;
    box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
    opacity: 0;
    z-index: 2;
  }

  .star::after {
    content: '';
    display: block;
    border-style: solid;
    border-width: 0 90px 2px 90px;
    border-color: transparent transparent transparent rgba(255, 255, 255, .3);
    transform: rotate(-135deg) translate3d(1px, 3px, 0);
    box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
    transform-origin: 0 100%;
  }
  .pink {
    position: absolute;
    top: 60vh;
    left: 40vw;
    background: #fff;
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
  }
  .pink::after {
    border-color: transparent transparent transparent #fff;
    animation-delay: 5s;
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
  }
  .blue {
    position: absolute;
    top: 20vh;
    left: 80vw;
    animation-delay: 7s;
    -webkit-animation-delay: 7s;
    -moz-animation-delay: 7s;
  }
  .blue::after {
    border-color: transparent transparent transparent #fff;
    -webkit-animation-delay: 7s;
    -moz-animation-delay: 7s;
    animation-delay: 7s;
  }
  .black {
    position: absolute;
    top: 10vh;
    left: 10vw;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
  }
  .black:after {
    border-color: transparent transparent transparent #fff;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    animation-delay: 2s;
  }
  @keyframes star-ani {
    0% {
      opacity: 0;
      transform: scale(0) translate3d(0, 0, 0);
    }
    20%{
      opacity: 0.8;
      transform: scale(0.2) translate3d(100px, 100px, 0);
    }
    40% {
      opacity: 0.8;
      transform: scale(0.4) translate3d(200px, 200px, 0);
    }
    60% {
      opacity: 0.8;
      transform: scale(0.6) translate3d(300px, 300px, 0);
    }
    80% {
      opacity: 1;
      transform: scale(1) translate3d(350px, 350px, 0);
    }
    100% {
      opacity: 1;
      transform: scale(1.2) translate3d(400px, 380px, 0);
    }
  }

  .text{
    position: absolute;
    right: 5vw;
    bottom: 30vh;
    z-index: 5;
    h1{
      text-align: center;
      color:#6699CC;
      margin-bottom: 20px;
    }
    .rank{
      counter-reset: rank;
      li{
        font-size: 20px;
        color: @mainfontcolor;
        list-style: none;
        .text-title{
          a{
            color: @mainfontcolor;

            &:hover{
              color: #6699CC;
            }
          }
          &::before{
            counter-increment: rank;
            content: counter(rank)".";
          }

        }
        .text-caption{
          width:30vw ;
          height:10vh ;
          margin-top: 10px;
          &:before{
            content: '';
            display: inline-block;
            width: 15px;
          }
        }
      }
    }
  }
}

